import React, {FC, useEffect} from "react";
import BreadcrumbPath from "../../../components/BreadcrumbPath";
import {Carousel} from "antd";
import {Link} from "react-router-dom";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";


const Home: FC<any> = ({MobxData}) => {
    const {announcementList, getAnnouncementList} = MobxData;

    useEffect(() => {
        getAnnouncementList();
    }, [])
    
    const contentStyle: Object = {
        width: "100%",
        height: '200px',
    };
    const ulStyle: Object = {
        listStyle: 'none',
        marginTop: "20px",
        width: "100%",
        height: "calc(100vh - 180px)",
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "space-between",
        alignContent: "flex-start",
        overflow: "auto"
    }
    const liStyle: Object = {
        width: "49%"
    }
    const aStyle: Object = {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        width: "100%",
        height: "60px",
        padding: "0 10px",
        marginBottom: "10px",
        backgroundColor: "#fafafa",
        borderRadius: "10px",
        color: "black"
    };
    return (
        <div>
            <BreadcrumbPath/>
            <Carousel autoplay>
                <div>
                    <img style={contentStyle} src={require("../../../assets/1.jpg")} alt=""/>
                </div>
                <div>
                    <img style={contentStyle} src={require("../../../assets/2.jpg")} alt=""/>
                </div>
                <div>
                    <img style={contentStyle} src={require("../../../assets/3.jpg")} alt=""/>
                </div>
            </Carousel>
            <h2>公告</h2>
            <ul style={ulStyle}>
                {
                    announcementList && announcementList.map((item: any) => {
                        return (
                            <li key={item._id} style={liStyle}>
                                <Link
                                    style={aStyle}
                                    to={`/main/announcement/announcementDetails?title=${item.title}&time=${new Date(parseInt(item.time)).toLocaleString()}&username=${item.username}&content=${item.content}`}>
                                    <span>{item.title}</span>
                                    <span>{new Date(parseInt(item.time)).toLocaleString()}</span>
                                </Link>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    );
}
export default inject('MobxData')(observer(Home));